<template>
  <XiangSvg
    :config="config"
    :line-data="lineData"
    :wire-data="wireData"
    :ziDaoNum="ziDaoNum"
    v-for="xiang in xiangData"
    :key="xiang.id">
    <span class="font-[consolas] text-[12px] font-bold">{{ xiang.xiangName }}</span>
  </XiangSvg>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import XiangSvg from './LineSvg/XiangSvg.vue'
import useTowerPointStore from '@/states/useTowerPointStore'
import useCalcBetstore from '@/states/useCalcBetstore'

const towerPointStore = useTowerPointStore()
const calcBetStore = useCalcBetstore()

const ziDaoNum = ref(2)
const lineData = computed(() => {
  return towerPointStore.points.map((point, index) => {
    const btSpan = calcBetStore.calcBets[index] ? calcBetStore.calcBets[index].btSpan : 0
    return {
      tName: point.tower.tName,
      btSpan,
      x: point.x,
      line: btSpan,
      leiLine: btSpan,
    }
  })
})
const wireData = ref<WrieDataInter[]>([
  {
    id: 1,
    type: 'LGJ-400/50',
    long: 2500,
    show: 2100,
    remain: 400,
    startBetId: 0,
    startBet_left_long: 0,
    startBet_right_long: 300,
    betIds: [1],
    endBetId: 2,
    endBet_left_long: 100,
    endBet_right_long: 330,
    ziWire_id: 0,
    xiang_id: 0,
  },
  {
    id: 2,
    type: 'LGJ-400/50',
    long: 2500,
    show: 2300,
    remain: 200,
    startBetId: 2,
    startBet_left_long: 50,
    startBet_right_long: 330,
    betIds: [3],
    endBetId: 4,
    endBet_left_long: 200,
    endBet_right_long: 100,
    ziWire_id: 0,
    xiang_id: 0,
  },
  {
    id: 3,
    type: 'LGJ-400/50',
    long: 2500,
    show: 2100,
    remain: 400,
    startBetId: 0,
    startBet_left_long: 0,
    startBet_right_long: 300,
    betIds: [1],
    endBetId: 2,
    endBet_left_long: 200,
    endBet_right_long: 230,
    ziWire_id: 1,
    xiang_id: 0,
  },
  {
    id: 4,
    type: 'LGJ-400/50',
    long: 2500,
    show: 2300,
    remain: 200,
    startBetId: 2,
    startBet_left_long: 200,
    startBet_right_long: 230,
    betIds: [3],
    endBetId: 4,
    endBet_left_long: 200,
    endBet_right_long: 100,
    ziWire_id: 1,
    xiang_id: 0,
  },
])

const { config } = defineProps<{
  config: CanvasConfig
}>()

const xiangData = computed(() => {
  return [
    { id: 1, xiangName: '左相' },
    { id: 2, xiangName: '中相' },
    { id: 3, xiangName: '右相' },
  ]
})
</script>

<style lang="scss" scoped></style>
